<template>
<div>
  <div id="g_top" class="m-top">&nbsp;</div>
  <div id="g_nav" class="m-subnav">&nbsp;</div>
  <div id="m-playlist" class="g-bd4 f-cb" v-if="viewFlag">
    <div class="g-mn4">
      <div class="g-wrap6">
        <div class="m-lycifo f-cb" id="auto-id-dJEM40G4UzhHVPx">
          <div class="u-cover u-cover-6 f-fl">
            <img :src="songdata ? songdata.picUrl  : null"  :alt="songdata? songdata.name :null" />
            <span class="msk f-alpha"></span>
          </div>
           <div class="cnt">
              <div class="hd f-cb">
                <i class="f-fl u-icn u-icn-13 f-pr"></i>
                <div class="tit">
                  <em class="f-ff2 f-brk">
                    {{ songdata ? songdata.name : null }}
                  </em>
                </div>
              </div>
              <p class="des s-fc4">歌手：
                <span title="">
                <a class="s-fc7" href="javascripy:;" v-for="(item , index) in songdata.author" :key= 'index' @click="artist(item.id)">{{item.name}}<slot v-if="index  !== songdata.author.length -1"> / </slot> </a>
                </span>
              </p>
              <p class="des s-fc4">所属专辑：<a href="javascript:;" class="s-fc7"  @click="toalbum">{{songdata? songdata.Album: null}}</a></p>
              <div class="btns f-cb">
                <a
                  href="javascript:;"
                  class="u-btn2 u-btn2-2 u-btni-addply f-fl"
                  @click.stop="send_song($event)"
                  ><i><em class="ply"></em> 播放</i></a
                >
                <a href="javascript:;" class="u-btni u-btni-fav"
                  ><i>收藏</i>
                </a>
                <a href="javascript:;" class="u-btni u-btni-share"
                  ><i>分享</i></a
                >
                <a href="javascript:;" class="u-btni u-btni-dl"><i>下载</i></a>
                <a href="javascript:;" class="u-btni u-btni-cmmt"
                  ><i>(32542)</i></a
                >
              </div>
              <div class="bd bd-open f-brk f-ib" ref="lyricBox">
                 <div v-html=" Toplyric_data"></div>
                 <div v-html="bottomlyric_data" v-show="text_slice"></div>
                <div class="crl"><a href="javascript:;" class="s-fc7" @click="text_slice = !text_slice">{{!text_slice ? '展开' : '关闭'}}<i :class="['u-icn' ,{'u-icn-69':!text_slice} , {'u-icn-70':text_slice}]"></i></a></div>
              </div>
          </div>
        </div>
        <comment :id="songid"></comment>
      </div>
    </div>
    <slibar :id="songid" ></slibar>
  </div>
</div>
</template>

<script>
import slibar from './slibar.vue'
import comment from '../../../components/comment/comment.vue'
import {getSongDetial} from '../../../network/play'
import {lyric} from '../../../network/song'
export default {
  data() {
    return {
      viewFlag:true,
      songid: null,  //歌曲id
      songdata:{}, //歌曲数据
       text_slice: false, //展开收起按钮的切换
       Toplyric_data:'', // 上半部分歌词
       bottomlyric_data:'', //下半部分的歌词
    };
  },
  components:{
   comment,
   slibar
  },
  methods:{
     retard(){
          this.viewFlag = false
          this.$nextTick(() => {
              this.viewFlag = true
          })
      },
     result_songData(id){  //获取整个歌曲详情
          getSongDetial(id).then(res => {
            this.retard()
             var obj ={}
             obj.name = res.data.songs[0].name
             obj.Album = res.data.songs[0].al.name
             obj.Albumid = res.data.songs[0].al.id
             obj.picUrl = res.data.songs[0].al.picUrl+'?param=130y130'
             obj.author = res.data.songs[0].ar
             this.songdata = obj
          })
     },
     song_lyric(id){       //获取歌词
      this.Toplyric_data = ''
       this.bottomlyric_data = ''
         lyric(id).then(res => {
             var lyric = res.data.lrc.lyric.split("\n")
             var bottomlyric =null
             if(lyric.length>10){
               bottomlyric = lyric.splice(10)
               lyric = lyric.splice(0 , 10)
             }

             lyric.forEach(item => {
              this.Toplyric_data += item.substr(item.indexOf("]") + 1, item.length) +"<br>" ;
             });
             bottomlyric.forEach(item => {
               this.bottomlyric_data += item.substr(item.indexOf("]") + 1, item.length) +"<br>" ;
             })
          })
     },
     send_song(e){       //发送歌曲
         this.$store.dispatch("music_ct",{music_id:this.songid.id, pageY:e.pageY})
     },
     toalbum(){        //跳转到专辑
       if(this.songdata.Albumid){
         this.$router.push({path:'/home/album/' , query:{id:this.songdata.Albumid}})
       }
     },
     artist(id){
        this.$router.push({path:'/home/artistDetails' , query:{id :id}})
     }
  },
  filters:{
    name(value){
        var arr = []
       arr.push(value)
       console.log(arr)
    }
  },
   beforeRouteUpdate (to, from, next) {
     this.songdata = null
       this.songid = { name: "歌曲", id: to.query.id };
       this.result_songData(to.query.id ) 
       this.song_lyric(to.query.id )
       next()
    },
  created() {
      this.songid = { name: "歌曲", id: this.$route.query.id };
      this.result_songData(this.$route.query.id )
      this.song_lyric(this.$route.query.id )
      
  },
 
};
</script>
<style scoped>
@import url("./song_style.css");
</style>
